/**
 * Created by 朱理哲 on 17/9/28.
 */
import React, {Component} from 'react';
import {
    View,
    Text,
    Image,
    TouchableOpacity,
    ScrollView,
    Navigator,
    FlatList,
    Dimensions
} from 'react-native'
import RequestUtil from '../../../js/util/NetUtil'
import {OrderProductCell} from './OrderLuo'
import {PriceLabel} from "../../../js/home/ShoppingCart";
import Constant from "../../../js/Contant";
import OrderStore from '../../../js/order/OrderListStore'
import {SignOrder} from '../../../js/order/OrderNet'
import {NavigationActions} from 'react-navigation'
import {observer} from 'mobx-react';
import {observable, computed, action, autorun} from "mobx";
let ScreenHeight = Dimensions.get('window').height;
let ScreenWidth = Dimensions.get('window').width;
const PayParam = {orderNo: '',
                  orderId: 0,
                  totalPrice: 0};
const PraiseParam = {orderId:0,
                     shopId:0,
                     deliveryId:0,
                     productModels:[]};

//订单部分(下单时间/订单编号/订单状态)
//收货人地址部分(收货人信息/收货地址)
//店铺部分(店铺名称)
class DetailHeader extends Component {
    render() {
        let {createTime,
             orderNo,
             shopName,
             status} = this.props.shopOrderM;
        let {name,
             phoneNum,
             mapAddress} = this.props.addressM;
        return <View>
            <View style={[{height:15},HeaderFooterStyle.sepViewS]}/>
            {/*订单信息*/}
            <View style={HeaderFooterStyle.orderNumS}>
                <Text style={[{marginTop:15,marginLeft:12,fontSize:14}, HeaderFooterStyle.assistTextS]}>订单编号: {orderNo}</Text>
                <Text style={[{marginLeft:12,fontSize:14},HeaderFooterStyle.assistTextS]}>下单时间: {createTime}</Text>
                <Text style={[{marginBottom:15,marginLeft:12,flexDirection:'row',fontSize:14},HeaderFooterStyle.assistTextS]}>
                    订单状态:
                    <Text style={{fontSize:13,color:'rgba(77,192,255,1)'}}> {status}</Text>
                </Text>
            </View>
            <View style={[{height:15},HeaderFooterStyle.sepViewS]}/>

            {/*收货人信息&地址*/}
            <View style={{backgroundColor:'white'}}>
                <View style={HeaderFooterStyle.receiveS}>
                    <View style={{flexDirection:'row',backgroundColor:'white'}}>
                        <Image style={{height:14,width:11}} source={require('../../../luoasserts/me/station_details_icon_location.png')}/>
                        <Text style={[{fontSize:15},HeaderFooterStyle.mainTextS]}> 收 货 人:
                            <Text style={[{fontSize:13},HeaderFooterStyle.mainTextS]} numberOfLines={0}> {name}</Text>
                        </Text>
                    </View>
                    <Text style={[{marginRight:12,fontSize:13},HeaderFooterStyle.mainTextS]}>{phoneNum}</Text>
                </View>
                <View style={{marginTop:8,marginLeft:26,marginBottom:10,flexDirection:'row',width:ScreenWidth-24}}>
                    <Text style={[{fontSize:15},HeaderFooterStyle.mainTextS]}>
                        送货地址:
                        <Text style={[{fontSize:13},HeaderFooterStyle.mainTextS]} numberOfLines={0}> {mapAddress}</Text>
                    </Text>
                </View>
            </View>
            <View style={[{height:15},HeaderFooterStyle.sepViewS]}/>

            {/*店铺信息*/}
            <View style={{flexDirection:'row', height:40, backgroundColor:'white', justifyContent:'space-between', alignItems:'center'}}>
                <View style={{flexDirection:'row',height:15,alignItems:'center'}}>
                    <Image style={{marginLeft:12,height:15,width:15}} source={require('../../../luoasserts/tab/tab_icon_water_station_s.png')}/>
                    <Text style={{marginLeft:3,color:'rgba(119,119,119,1)'}}>{shopName}</Text>
                </View>
                <Image style={{marginRight:12,height:15,width:9}} source={require('../../../luoasserts/me/me-arrow.png')}/>
            </View>
            <View style={[{height:0.5},HeaderFooterStyle.lineViewS]}/>
        </View>
    }
}

//支付配送部分(水票抵用/实付款/支付方式/配送时间/配送员信息)
class DetailFooter extends Component {
    render() {
        let {useWaterTicket,
             totalPayRmb,
             payChannel,
             status,
             deliveryTime,
             deliveryerName,
             deliveryerPhoneNum} = this.props.deliveryM;
        return <View style={{backgroundColor:'white'}}>
            {/*水票抵用*/}
            <View style={[{height:35,justifyContent:'space-between'},HeaderFooterStyle.footerNormalS]}>
                <Text style={[{marginLeft:12,fontSize:14},HeaderFooterStyle.assistTextS]}>水票抵用：</Text>
                <Text style={[{marginRight:12,fontSize:14},HeaderFooterStyle.mainTextS]}>{useWaterTicket} 张</Text>
            </View>
            <View style={[{height:0.5},HeaderFooterStyle.lineViewS]}/>

            {/*实付款*/}
            <View style={[{height:35,justifyContent:'flex-end',paddingHorizontal:10},HeaderFooterStyle.footerNormalS]}>
                <Text style={{marginRight:12,fontSize:12.5,color:'rgba(51,51,51,1)'}}>实付款:</Text>
                <PriceLabel price={totalPayRmb} color={Constant.TEXT_COLOR_6}/>
            </View>

            <View style={[{height:0.5},HeaderFooterStyle.lineViewS]}/>
            <View style={[{height:15},HeaderFooterStyle.sepViewS]}/>
            <View style={[{height:0.5},HeaderFooterStyle.lineViewS]}/>

            {/*支付方式*/}
            <View style={[{height:44},HeaderFooterStyle.footerNormalS]}>
                <Text style={[{marginLeft:12,fontSize:15},HeaderFooterStyle.assistTextS]}>支付方式: </Text>
                <Text style={{fontSize:13,color:payChannel=='等待支付'?'#ff5255':'rgba(51,51,51,1)'}}>{payChannel}</Text>
            </View>
            <View style={[{height:0.5},HeaderFooterStyle.lineViewS]}/>

            {/*配送时间*/}
            <View style={[{height:44},HeaderFooterStyle.footerNormalS]}>
                <Text style={[{marginLeft:12,fontSize:15},HeaderFooterStyle.assistTextS]}>配送时间: </Text>
                <Text style={[{fontSize:13},HeaderFooterStyle.mainTextS]}>{deliveryTime}</Text>
            </View>
            <View style={[{height:0.5},HeaderFooterStyle.lineViewS]}/>

            {/*配送员信息*/}
            {status=='待付款' ? null:<View style={[{height:44},HeaderFooterStyle.footerNormalS]}>
                <Text style={[{marginLeft:12,fontSize:15},HeaderFooterStyle.assistTextS]}>送水工: </Text>
                <Text style={{fontSize:13,color:deliveryerName=='等待配送'?'#ff5255':'rgba(51,51,51,1)'}}>{deliveryerName} {deliveryerPhoneNum}</Text>
            </View>}

            <View style={[{height:15},HeaderFooterStyle.sepViewS]}/>
        </View>
    }
}

const HeaderFooterStyle = {
    orderNumS : {
        height:85,
        backgroundColor:'white',
        justifyContent:'space-between'
    },
    mainTextS : {
        color:'rgba(51,51,51,1)'
    },
    assistTextS : {
        color:'rgba(119,119,119,1)'
    },
    receiveS : {
        marginTop:10,
        marginLeft:12,
        height:20,
        flexDirection:'row',
        justifyContent:'space-between',
        backgroundColor:'white'
    },
    lineViewS : {
        flexDirection:'row',
        backgroundColor:'rgba(227,227,227,1)'
    },
    sepViewS : {
        flexDirection:'row',
        backgroundColor:'rgba(241,241,243,1)'
    },
    footerNormalS : {
        flexDirection:'row',
        backgroundColor:'white',
        alignItems:'center'
    },
    btnS : {
        width:70,
        height:25,
        borderRadius: 3,
        borderWidth:0.5,
        justifyContent:'center',
        alignItems:'center'
    },
    btnTextS : {
        font:14.5
    }
};

@observer
class DetailList extends Component {
    constructor(props){
        super(props);
        this.state = {
            shopOrderM:{},
            addressM:{},
            productA:[],
            deliveryM:{}
        }
    }
    async componentDidMount(){
        let Detail = await this.getOrderDetail();
        this.getDetailM(Detail);
    }
    async getOrderDetail(){
        let param = {shopOrderId:this.props.shopOrderId};
        return RequestUtil.requestData('order/orderDetail',param)
    }
    getDetailM(Detail){
        //订单信息
        let orderM = {createTime:Detail.createTime,
                      orderId:Detail.orderId,
                      orderNo:Detail.orderNo,
                      shopName:Detail.shopName,
                      status:Detail.status};
        //收货人地址信息
        let addM = {name:Detail.deliveryAddressModel.name,
                    phoneNum:Detail.deliveryAddressModel.phoneNum,
                    mapAddress:Detail.deliveryAddressModel.address.mapAddress};
        let orderProductA = Detail.productItemModels;
        //支付配送信息
        let deliveryDetailM = {useWaterTicket:Detail.useWaterTicket,
                               totalPayRmb:Detail.totalPayRmb,
                               payChannel:Detail.payChannel==''||Detail.payChannel==null?'等待支付':Detail.payChannel,
                               status:Detail.status,
                               deliveryTime:Detail.deliveryTime,
                               deliveryerName:Detail.deliveryerName==''||Detail.deliveryerName==null?'等待配送':Detail.deliveryerName,
                               deliveryerPhoneNum:Detail.deliveryerPhoneNum};
        PayParam.orderId = Detail.orderId;
        PayParam.orderNo = Detail.orderNo;
        PayParam.totalPrice = Detail.totalPayRmb;
        PraiseParam.orderId = Detail.orderId;
        PraiseParam.shopId = Detail.shopId;
        PraiseParam.deliveryId = Detail.deliveryId;
        PraiseParam.productModels = Detail.productItemModels;
        this.setState({
            shopOrderM:orderM,
            addressM:addM,
            productA:orderProductA,
            deliveryM:deliveryDetailM
        })
    }
    _renderItem=(item)=>(<OrderProductCell product={item.item}/>);
    _renderHeader(){
        return <DetailHeader shopOrderM={this.state.shopOrderM} addressM={this.state.addressM}/>
    }
    _renderFooter(){
        return <DetailFooter deliveryM={this.state.deliveryM}/>
    }
    render(){
        return <FlatList style={{backgroundColor:'rgba(241,241,243,1)'}}
                         onEndReachedThreshold={1}
                         data={this.state.productA}
                         renderItem={this._renderItem.bind(this)}
                         ListHeaderComponent={this._renderHeader.bind(this)}
                         ListFooterComponent={this._renderFooter.bind(this)}/>
    }
}

class DetailBottom extends Component {
    render() {
        let rightText = this.props.status=='待付款' ? '去支付' : this.props.status=='待收货'?'签收':'评价';
        return <View style={[{height:40,justifyContent:'flex-end'},HeaderFooterStyle.footerNormalS]}>
            <TouchableOpacity style={[{marginRight:12,borderColor:'rgba(77,192,255,1)'},HeaderFooterStyle.btnS]}
                              onPress={()=>{this.props.payPraise(this.props.status,this.props.orderId)}}>
                <Text style={[{color:'rgba(77,192,255,1)'},HeaderFooterStyle.btnTextS]}>{rightText}</Text>
            </TouchableOpacity>
        </View>
    }
}

export default class OrderDetailLuo extends Component {
    static navigationOptions = {
        title: '订单详情'
    };
    async goToPayPraise(status,orderId){
        if (status=='待付款') {
            this.props.navigation.navigate('QuickPay', PayParam);
        } else if (status=='待收货') {
            let param = {orderId: orderId};
            let singOrder = await SignOrder(param);
            LOG('JessieJ订单签收++++++++++'+JSON.stringify(singOrder));
            if (singOrder.respMsg=='successful') {
                OrderStore.SignOrder(orderId);
                let resetActiom = NavigationActions.reset({
                    index: 0,
                    actions: [
                        NavigationActions.navigate({routeName: 'Order'}),
                    ]
                });
                this.props.navigation.dispatch(resetActiom);
            }
        } else if (status=='待评价'){
            this.props.navigation.navigate('OrderPraise', PraiseParam);
        }
    }
    render(){
        let {orderId, status} = this.props.navigation.state.params.orderParam;
        return <View style={{flex:1,backgroundColor:'rgba(241,241,243,1)'}}>
            <DetailList shopOrderId={orderId}/>
            {status=='待付款' || status=='待收货' || status=='待评价' ? <DetailBottom status={status} orderId={orderId} payPraise={this.goToPayPraise.bind(this)}/>:null}

        </View>
    }
}